<template>
  <div class="kmSearchList">
    <div class="title">
      <span class="V7_iconfont V7_iconV7tubiao_mianfanhui" @click="breadcrumbBack"></span>
      <span v-html="title"></span>
    </div>
    <div class="container">
      <div v-if="listArr.length > 0">
        <div v-for="(item, index) in listArr" :key="index" class="listItem clearfix">
          <span class="listFlag V7_iconfont fl"
            :class="{V7_iconV7tubiao_youxiaozhishi : item.status === 'valid',
            V7_iconV7tubiao_wuxiaozhishi: item.status === 'invalid'}">
          </span>
          <div class="fl listContent">
            <div v-html="item.title" class="listItemTitle fl"  :style="item.status | isInvalid"></div>
            <div class="fr">
              <span class="V7_iconfont V7_iconV7tubiao_beizhu" @click="editItem(item)"></span>
              <span class="el-icon-delete" @click="delItem(item)"></span>
            </div>
            <div @click="lookDetails(item)" class="listContentBottom">
              <div v-html="item.content" class="content"  :style="item.status | isInvalid"></div>
              <div class="catalog" :style="item.status | isInvalid">知识目录：{{item.catalogLabel}}</div>
              <div class="updateObj"  :style="item.status | isInvalid">
                <span>更新时间：{{item.lastUpdateTime}}</span><span>更新人：{{item.agentName}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="more" v-if="isShowMore" @click="moreFun">加载更多</div>
      </div>
      <div v-else class="noData">
        暂无结果
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { KmModule } from '@/store/modules/km/index'
@Component({
  name: 'kmSearchList',
  filters: {
    isInvalid (status: string) {
      return status === 'invalid' ? 'color: #B3B9C7' : ''
    }
  }
})
export default class KmSearchList extends Vue {
  @Prop() private searchForm: any
  private $route: any
  private $store: any
  private $bus: any
  private $confirm: any
  private $message: any

  private title: string = ''

  private isShowMore = false

  private listArr: any = []

  private pageData = {
    limit: 50,
    page: 1
  }

  private breadcrumbBack () {
    this.$emit('breadcrumbBack', 'searchList')
  }

  private searchList (more?: boolean, searchform?: any) {
    const searchObj = searchform || this.searchForm
    const actionData = {
      url: '/im-km/action/item/list',
      method: 'POST',
      data: {
        page: this.pageData.page,
        limit: this.pageData.limit,
        type: 'km',
        kmType: 'inner',
        ...searchObj
      }
    }
    const keywords = (searchObj && searchObj.keywords) || ''
    this.title = `“<span style="color: red">${keywords}</span>”相关的搜索结果`
    KmModule.KmCommonAction(actionData).then(res => {
      if (res && res.success) {
        const list = res.data.list || []
        list.forEach(item => {
          const agentObj = this.$store.state.common.publicCache.userListObj[item.updateUser] // 座席
          item.agentName = agentObj ? agentObj.name : '--'
        })
        if (more) {
          this.listArr = [...this.listArr, ...list]
        } else {
          this.listArr = list
        }
        if (list.length < this.pageData.limit) {
          this.isShowMore = false
        } else {
          this.isShowMore = true
        }
      }
    })
  }

  private moreFun () {
    this.pageData.page++
    this.searchList(true)
  }

  private delItem (item: any) {
    this.$confirm('确定删除该知识点吗', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const catalogId = this.$route.params.id || ''
      const data = { url: '/im-km/action/item/delete', method: 'POST', data: { itemIds: [item._id], kmType: 'inner', catalogId, isAll: false } }
      KmModule.KmCommonAction(data).then((res: any) => {
        if (res && res.success) {
          this.$message.success('删除知识点成功')
          this.searchList()
        }
      })
    })
  }

  private editItem (item: any) {
    const actionData = { url: '/im-km/action/item/show', method: 'POST', data: { itemId: item._id, kmType: 'inner' } }
    KmModule.KmCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.$emit('handleDetail', res.data.row)
      }
    })
  }

  private lookDetails (obj: any) {
    this.$emit('lookFun', obj)
  }

  private mounted () {
    // 首次进入页面的时候因为页面还未加载，所以bus事件不会执行。再次搜索时mounted只执行一次，所以每次搜索都走bus事件
    this.searchList()
    this.$bus.$on('keywordsSearchFun', (res) => {
      this.searchList(false, res)
    })
  }

  private beforeDestroy () {
    this.$bus.$off('keywordsSearchFun')
  }
}
</script>
<style lang="stylus" scoped>
  .kmSearchList
    height 100%
    .title
      padding 20px 0px 7px 0px
      span
        font-size 14px
      .V7_iconfont
        cursor pointer
        color #B3B9C7
        margin-right 8px
    .container
      height calc(100% - 60px)
      overflow auto
      .noData
        text-align center
        height 100%
        line-height 200px
        font-size 14px
      .more
        text-align center
        color #008BEE
        margin-top 10px
        cursor pointer
      .listItem
        padding 13px 5px 16px 5px
        margin-top 13px
        border-bottom 1px solid #ECF0F3
        .listFlag
          color #008BEE
          font-size 24px
        .V7_iconV7tubiao_wuxiaozhishi
          color #B3B9C7
        .listContentBottom
          cursor pointer
        .listContent
          width calc(100% - 40px)
          margin-left 14px
        .listItemTitle
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          margin-bottom 10px
          width calc(100% - 80px)
        .V7_iconV7tubiao_beizhu
          font-size 12px
          cursor pointer
          color #B3B9C7
        .el-icon-delete
          font-size 12px
          color #B3B9C7
          cursor pointer
          margin 0px 10px
        .V7_iconV7tubiao_beizhu:hover
          color #008BEE
        .el-icon-delete:hover
          color #008BEE
        .content
          color #71798C
          width 100%
          word-wrap break-word
          display -webkit-box
          -webkit-box-orient vertical
          -webkit-line-clamp 2
          overflow hidden
        .updateObj, .catalog
          color #9499AC
          margin-top 5px
          span
            margin-right 8px
</style>
